<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">头像</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->

		<!-- 头像start -->
		<view class="avatar">
			<u-avatar :src="src" shape="square" size='750rpx'></u-avatar>
		</view>
		<!-- 头像end -->

		<!--底部start-->
		<view class="f_btn">
			<button class="submit on" @click="change_open()">更换头像</button>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<!--底部end-->
		
		<!-- 弹窗start -->
		<u-popup :show="change_show" :closeOnClickOverlay="true" @close="change_close" customStyle="background: none">
			<view class="change_box">
				<view>选择照片</view>
				<view @click="change_close">取消</view>
				<u-safe-bottom></u-safe-bottom>
			</view>
		</u-popup>
		<!-- 弹窗end -->

	</view>
</template>

<script>
export default {
	data() {
		return {
			change_show: false,
			src: '../../static/images/my_pfp.png'
		}
	},
	methods: {
		change_open() {
			this.change_show = true
			// console.log('open');
		},
		change_close() {
			this.change_show = false
			// console.log('close');
		}
	}
}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("my.scss");
</style>
